<template>
  <div class="box">
    <manager-nav class="manager-nav" @menu-selected-changed="menuChanged"></manager-nav>
    <data-over-view class="data-over-box" v-if="index == 2"></data-over-view>
    <detailed-info-view class="detailed-box" v-if="index == 1"></detailed-info-view>
  </div>
</template>

<script>
import LOCAL from '@/main'
import ManagerNav from "@/components/manage/nav/ManagerNav.vue"
import DataOverView from "@/components/manage/data-page/DataOverView.vue"
import DetailedInfoView from "@/components/manage/detailed/DetailedInfoView.vue"
export default {
  data() {
    return {
      LOCAL,
      index: 1,
    }
  },
  methods: {
    menuChanged(index) {
      this.index = index;
      console.log(index);
    }
  },
  components: {
    ManagerNav,
    DataOverView,
    DetailedInfoView
  },
  mounted() {
    LOCAL.CHI = false;
    LOCAL.TITLE_INFO = "管理",
      LOCAL.MAIN_ACTION_INDEX = 1;
  }
}
</script>

<style scoped>
.box {
  position: relative;
  display: flex;
  float: left;
  height: 100%;
  width: 100%;
}

.manager-nav {
  position: relative;
  display: inline-block;
  width: 200px;
}

.data-over-box {
  position: relative;
  display: inline-block;
  width: 170vh;
  height: auto;
  margin-left: 10px;
}
</style>